<!--
 * @Author: caozaihui 15908754730@163.com
 * @Date: 2024-06-14 00:47:40
 * @LastEditors: caozaihui 15908754730@163.com
 * @LastEditTime: 2024-06-26 13:15:54
 * @FilePath: \YMU_forum_vue\src\views\Article\components\main\ArticleComment.vue
 * @Description:展示评论
-->

<script setup>
import { InfoFilled } from '@element-plus/icons-vue'
import { onMounted, ref } from 'vue';
import { postSendMag, deleteSendMag } from '@/apis/article.js';
import { useRouter, useRoute } from 'vue-router';
import { ElMessage } from 'element-plus'
// 获取是否登录数据
import { useAccountStore } from '@/stores/useAccountStore';
import { getPublicContentment } from '@/apis/article.js'
const accountStore = useAccountStore()
const account = accountStore.getAccount()
const code = ref(account.code);
const uid = ref(account.data.user != undefined ? account.data.user.uid : -1)
const router = useRouter();
const route = useRoute();
const contentments = ref('')
const getCommentList = () => {
    getPublicContentment(route.query.aid).then(res => {
        contentments.value = res.data
    })
}
onMounted(() => getCommentList())
const send = ref({
    aid: 0,
    content: '',
    parentComId: 0
})

// 添加回复
const sendMsg = (parentComId) => {
    if (code.value != 0) {
        router.push({
            path: '/login'
        })
    }
    //文章id和对方评论id
    send.value.aid = route.query.aid
    send.value.parentComId = parentComId
    postSendMag(send.value).then(res => {
        if (res.code != 0) {
            ElMessage.error(res.msg)
        } else {
            send.value.content = ''
            getCommentList()
        }
    });
}

// 删除
const deleteMag = (comId) => {
    if (code.value != 0) {
        router.push({
            path: '/login'
        })
    } else {
        deleteSendMag(comId).then(res => {
            if (res.code != 0) {
                ElMessage.error(res.msg)
            } else {
                getCommentList()
                console.log('删除评论', res)
            }
        });
    }

}
</script>

<template>
    <el-row>
        <el-col :lg="4"></el-col>
        <el-col :lg="16" :xs="24">
            <el-card class="card">
                <div>
                    <el-text class="title">评论</el-text>
                    <dvi style="display: flex;margin-bottom: 10px;">
                        <el-input v-model="send.content" style="margin-top: 10px;height: 35px;" placeholder="在这里回复" />
                        <el-button @click="sendMsg(0)" type="primary"
                            style="margin-top: 10px;margin-bottom: 10px;margin-left: 10px;">回复</el-button>
                    </dvi>
                    <div v-for="item in contentments" class="con">
                        <!-- 父评论 -->
                        <el-row>
                            <el-col :lg="2" :xs="3">
                                <img :src="item.uavator" style="height: 30px;border-radius: 50%;margin-right:15px;width:30px">
                            </el-col>
                            <el-col :lg="3" :xs="4">
                                <div style="font-size: 15px;font-weight:bold;">{{ item.nickname }}</div>
                            </el-col>
                            <el-col :lg="17" :xs="13">
                                <div class="flex-grow time">{{ item.createTime }}</div>
                            </el-col>
                            <el-col :lg="2" :xs="4">
                                <el-popover placement="left" :width="300" trigger="click">
                                    <template #reference>
                                       <svg t="1719367483060" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9680" width="32" height="32"><path d="M198.217143 912.969143h-3.657143a58.514286 58.514286 0 0 1-30.500571-12.214857 63.670857 63.670857 0 0 1-21.577143-61.476572l23.661714-108.763428a357.888 357.888 0 0 1-55.515429-96.548572 346.660571 346.660571 0 0 1-23.917714-126.537143 359.460571 359.460571 0 0 1 123.611429-269.604571 415.085714 415.085714 0 0 1 131.145143-80.018286 446.683429 446.683429 0 0 1 160.256-29.257143 431.250286 431.250286 0 0 1 290.889142 109.421715 378.404571 378.404571 0 0 1 90.368 120.868571 349.257143 349.257143 0 0 1 0 297.325714 376.246857 376.246857 0 0 1-90.368 120.685715 412.013714 412.013714 0 0 1-131.035428 80.128 444.489143 444.489143 0 0 1-159.853714 29.257143 451.474286 451.474286 0 0 1-99.291429-10.971429 393.179429 393.179429 0 0 1-77.860571-25.124571l-98.194286 55.588571a61.330286 61.330286 0 0 1-28.16 7.241143zM226.962286 694.857143a36.571429 36.571429 0 0 1 9.764571 33.901714l-22.272 103.094857 92.745143-52.662857a34.304 34.304 0 0 1 16.237714-4.205714 31.634286 31.634286 0 0 1 13.787429 3.108571 349.842286 349.842286 0 0 0 79.542857 27.648 385.609143 385.609143 0 0 0 85.028571 9.179429 367.286857 367.286857 0 0 0 246.930286-91.940572 303.250286 303.250286 0 0 0 72.813714-97.133714 277.577143 277.577143 0 0 0 0-237.056 306.505143 306.505143 0 0 0-72.813714-97.426286 378.038857 378.038857 0 0 0-494.226286 0 310.564571 310.564571 0 0 0-72.813714 97.426286 274.029714 274.029714 0 0 0-8.118857 218.002286A294.509714 294.509714 0 0 0 226.925714 694.857143z" fill="#007CFF" p-id="9681"></path><path d="M669.878857 572.928a50.432 50.432 0 0 1-35.657143-15.725714 53.284571 53.284571 0 0 1-14.628571-36.937143 55.04 55.04 0 0 1 14.628571-37.229714 49.152 49.152 0 0 1 71.424 0 55.113143 55.113143 0 0 1 14.628572 37.339428 52.918857 52.918857 0 0 1-14.628572 36.937143 50.249143 50.249143 0 0 1-35.766857 15.616z m-168.228571 0a48.932571 48.932571 0 0 1-35.657143-15.725714 53.284571 53.284571 0 0 1-14.628572-36.937143 55.332571 55.332571 0 0 1 14.628572-37.229714 48.786286 48.786286 0 0 1 71.131428 0 54.857143 54.857143 0 0 1 14.628572 37.339428 52.224 52.224 0 0 1-14.628572 36.937143 49.005714 49.005714 0 0 1-35.328 15.616z m-164.827429 0a49.408 49.408 0 0 1-35.474286-15.725714 52.589714 52.589714 0 0 1-14.628571-36.937143 54.345143 54.345143 0 0 1 14.628571-37.229714 48.676571 48.676571 0 0 1 35.584-15.433143 49.627429 49.627429 0 0 1 35.584 15.323428 54.381714 54.381714 0 0 1 14.628572 37.339429 52.845714 52.845714 0 0 1-14.628572 36.937143 50.102857 50.102857 0 0 1-35.547428 15.725714z" fill="#06CC20" p-id="9682"></path></svg>
                                    </template>
                                    <el-input v-model="send.content" placeholder="在这里回复" />
                                    <el-button @click="sendMsg(item.comId)" type="primary" size="small"
                                        style="margin-top: 10px;">确定</el-button>
                                </el-popover>
                            </el-col>
                        </el-row>
                        <div style="margin-top: 15px;">{{ item.content }}
                            <el-popconfirm confirm-button-text="确认" cancel-button-text="不删了" :icon="InfoFilled"
                                icon-color="#626AEF" title="确认删除您的评论吗?" @confirm="deleteMag(item.comId)" @cancel="">
                                <template #reference>
                                        <svg  v-if="uid === item.uid" t="1719366878474" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1513" width="16" height="16"><path d="M899.2 298.7H131c-13.8 0-25-11.2-25-25s11.2-25 25-25h768.1c13.8 0 25 11.2 25 25s-11.1 25-24.9 25z" fill="#0CC6BF" p-id="1514"></path><path d="M681.7 291.6c-13.8 0-25-11.2-25-25v-48.2c0-20.9-17-37.9-37.9-37.9H411.4c-20.9 0-37.9 17-37.9 37.9v48.2c0 13.8-11.2 25-25 25s-25-11.2-25-25v-48.2c0-48.5 39.4-87.9 87.9-87.9h207.4c48.5 0 87.9 39.4 87.9 87.9v48.2c0 13.8-11.2 25-25 25zM719.7 918H310.5c-48.5 0-87.9-41.7-87.9-93V382.9c0-13.8 11.2-25 25-25s25 11.2 25 25v442.2c0 23.7 17 43 37.9 43h409.2c20.9 0 37.9-19.3 37.9-43V382.9c0-13.8 11.2-25 25-25s25 11.2 25 25v442.2c0 51.2-39.4 92.9-87.9 92.9z" fill="#0CC6BF" p-id="1515"></path><path d="M438.2 772.6c-16.6 0-30-13.4-30-30v-286c0-16.6 13.4-30 30-30s30 13.4 30 30v286c0 16.5-13.4 30-30 30zM599.4 772.6c-16.6 0-30-13.4-30-30v-286c0-16.6 13.4-30 30-30s30 13.4 30 30v286c0 16.5-13.4 30-30 30z" fill="#0CC6BF" p-id="1516"></path></svg>
                                </template>
                            </el-popconfirm>
                        </div>
                        <!-- 子评论 -->
                        <div v-for="(sub, index) in item.subReply" class="subCon">
                            <el-row>
                                <el-col :lg="1" :xs="3">
                                    <img :src="sub.uavator" style="height: 25px;border-radius: 50%;margin-right: 15px;width:25px">
                                </el-col>
                                <el-col :lg="3" :xs="4">
                                    <span style="font-size: 12px;font-weight:bold;">{{ sub.nickname }}</span>
                                </el-col>
                                <el-col :lg="18" :xs="13">
                                    <span style="font-size: 10px;">{{ sub.createTime }}</span>
                                </el-col>
                                <el-col :lg="2" :xs="4">
                                    <el-popover placement="left" :width="300" trigger="click">
                                        <template #reference>
                                           <svg t="1719367483060" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9680" width="32" height="32"><path d="M198.217143 912.969143h-3.657143a58.514286 58.514286 0 0 1-30.500571-12.214857 63.670857 63.670857 0 0 1-21.577143-61.476572l23.661714-108.763428a357.888 357.888 0 0 1-55.515429-96.548572 346.660571 346.660571 0 0 1-23.917714-126.537143 359.460571 359.460571 0 0 1 123.611429-269.604571 415.085714 415.085714 0 0 1 131.145143-80.018286 446.683429 446.683429 0 0 1 160.256-29.257143 431.250286 431.250286 0 0 1 290.889142 109.421715 378.404571 378.404571 0 0 1 90.368 120.868571 349.257143 349.257143 0 0 1 0 297.325714 376.246857 376.246857 0 0 1-90.368 120.685715 412.013714 412.013714 0 0 1-131.035428 80.128 444.489143 444.489143 0 0 1-159.853714 29.257143 451.474286 451.474286 0 0 1-99.291429-10.971429 393.179429 393.179429 0 0 1-77.860571-25.124571l-98.194286 55.588571a61.330286 61.330286 0 0 1-28.16 7.241143zM226.962286 694.857143a36.571429 36.571429 0 0 1 9.764571 33.901714l-22.272 103.094857 92.745143-52.662857a34.304 34.304 0 0 1 16.237714-4.205714 31.634286 31.634286 0 0 1 13.787429 3.108571 349.842286 349.842286 0 0 0 79.542857 27.648 385.609143 385.609143 0 0 0 85.028571 9.179429 367.286857 367.286857 0 0 0 246.930286-91.940572 303.250286 303.250286 0 0 0 72.813714-97.133714 277.577143 277.577143 0 0 0 0-237.056 306.505143 306.505143 0 0 0-72.813714-97.426286 378.038857 378.038857 0 0 0-494.226286 0 310.564571 310.564571 0 0 0-72.813714 97.426286 274.029714 274.029714 0 0 0-8.118857 218.002286A294.509714 294.509714 0 0 0 226.925714 694.857143z" fill="#007CFF" p-id="9681"></path><path d="M669.878857 572.928a50.432 50.432 0 0 1-35.657143-15.725714 53.284571 53.284571 0 0 1-14.628571-36.937143 55.04 55.04 0 0 1 14.628571-37.229714 49.152 49.152 0 0 1 71.424 0 55.113143 55.113143 0 0 1 14.628572 37.339428 52.918857 52.918857 0 0 1-14.628572 36.937143 50.249143 50.249143 0 0 1-35.766857 15.616z m-168.228571 0a48.932571 48.932571 0 0 1-35.657143-15.725714 53.284571 53.284571 0 0 1-14.628572-36.937143 55.332571 55.332571 0 0 1 14.628572-37.229714 48.786286 48.786286 0 0 1 71.131428 0 54.857143 54.857143 0 0 1 14.628572 37.339428 52.224 52.224 0 0 1-14.628572 36.937143 49.005714 49.005714 0 0 1-35.328 15.616z m-164.827429 0a49.408 49.408 0 0 1-35.474286-15.725714 52.589714 52.589714 0 0 1-14.628571-36.937143 54.345143 54.345143 0 0 1 14.628571-37.229714 48.676571 48.676571 0 0 1 35.584-15.433143 49.627429 49.627429 0 0 1 35.584 15.323428 54.381714 54.381714 0 0 1 14.628572 37.339429 52.845714 52.845714 0 0 1-14.628572 36.937143 50.102857 50.102857 0 0 1-35.547428 15.725714z" fill="#06CC20" p-id="9682"></path></svg>
                                        </template>
                                        {{ send.content }}
                                        <el-input v-model="send.content" placeholder="在这里回复" />
                                        <el-button @click="sendMsg(sub.comId)" type="primary" size="small"
                                            style="margin-top: 10px;">确定</el-button>
                                    </el-popover>
                                </el-col>
                                
                            </el-row>
                            <div style="margin-top: 15px;">
                                <span v-text="index > 0 ? '@' + sub.pnickname + ' : ' : ''"
                                    style="color:dodgerblue"></span>{{
                                sub.content }}
                                <el-popconfirm confirm-button-text="确认" cancel-button-text="不删了" :icon="InfoFilled"
                                    icon-color="#626AEF" title="确认删除您的评论吗?" @confirm="deleteMag(sub.comId)" @cancel="">
                                    <template #reference>
                                        <svg  v-if="uid === item.uid" t="1719366878474" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1513" width="16" height="16"><path d="M899.2 298.7H131c-13.8 0-25-11.2-25-25s11.2-25 25-25h768.1c13.8 0 25 11.2 25 25s-11.1 25-24.9 25z" fill="#0CC6BF" p-id="1514"></path><path d="M681.7 291.6c-13.8 0-25-11.2-25-25v-48.2c0-20.9-17-37.9-37.9-37.9H411.4c-20.9 0-37.9 17-37.9 37.9v48.2c0 13.8-11.2 25-25 25s-25-11.2-25-25v-48.2c0-48.5 39.4-87.9 87.9-87.9h207.4c48.5 0 87.9 39.4 87.9 87.9v48.2c0 13.8-11.2 25-25 25zM719.7 918H310.5c-48.5 0-87.9-41.7-87.9-93V382.9c0-13.8 11.2-25 25-25s25 11.2 25 25v442.2c0 23.7 17 43 37.9 43h409.2c20.9 0 37.9-19.3 37.9-43V382.9c0-13.8 11.2-25 25-25s25 11.2 25 25v442.2c0 51.2-39.4 92.9-87.9 92.9z" fill="#0CC6BF" p-id="1515"></path><path d="M438.2 772.6c-16.6 0-30-13.4-30-30v-286c0-16.6 13.4-30 30-30s30 13.4 30 30v286c0 16.5-13.4 30-30 30zM599.4 772.6c-16.6 0-30-13.4-30-30v-286c0-16.6 13.4-30 30-30s30 13.4 30 30v286c0 16.5-13.4 30-30 30z" fill="#0CC6BF" p-id="1516"></path></svg>
                                    </template>
                                </el-popconfirm>
                            </div>
                        </div>
                    </div>
                </div>
            </el-card>
        </el-col>
        <el-col :lg="4"></el-col>
    </el-row>
</template>

<style scoped>
@media screen and (max-width: 768px) {
    .time {
        font-size: 12px;
    }
}

.flex-grow {
    flex-grow: 1;
}

.card {
    margin-top: 10px;
}

.con {
    padding-top: 10px;
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 10px;
    margin-bottom: 15px;
    background-color: rgb(248, 248, 248);
    border-radius: 10px;
}

.subCon {
    border-left: 4px solid rgb(217, 217, 217);
    margin-left: 20px;
    margin-top: 15px;
    padding-left: 10px;
}

.title {
    font-size: 18px;
    font-weight: bolder;
    color: #000;
    padding-left: 16px;
}

.text {
    font-size: 14px;
    color: #000;
    margin-right: 10px;
}

.iconfont {
    font-size: 25px;
}

.tagLine {
    margin-left: 16px;
    margin-bottom: 10px;
}

.tag {
    margin-right: 5px;
    margin-bottom: 5px;
}
</style>